<template>
    <div id="company">
        <h1 class="title">热门企业</h1>
        <div class="company-section">
            <el-card v-for="company in companyList" :key="company.positionId" class="company-card"
                @click.native="selectCompany(company.companyId)">
                <div class="company-content">
                    <div class="company-title-salary">
                        <el-avatar :src="company.avatar" :size="60"></el-avatar>
                        <span class="company-title">{{ company.name }}</span>
                    </div>
                    <div class="company-tags">
                        <span><i class="el-icon-copy-document"></i> {{ company.companyIndustry }}</span>
                        <span v-if="company.workTimeType"><i class="el-icon-time"></i> {{
                            reversedWorkTimeMap[company.workTimeType] }}</span>
                    </div>
                    <div class="company-meta">
                        <span class="company-location"><i class="el-icon-location"></i>{{ company.location }}</span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { smartRecommendCompanyList } from '@/util/seeker_api/company_api'
export default {
    name: 'selectedCompany',
    data() {
        return {
            companyList: [],
            workTimeTypeMap: {
                '单休': 'SINGLE_REST',
                '双休': 'DOUBLE_REST',
                '灵活工作时间': 'FLEXIBLE'
            },
        }
    },
    created() {
        this.getCompanyList()
    },
    methods: {
        async getCompanyList() {
            const res = await smartRecommendCompanyList()
            this.companyList = res.data
        },
        selectCompany(id) {
            this.$router.push({
                name: 'seekerCompanyDetail',
                query: { id: id }
            })
        },
    },
    computed: {
        reversedWorkTimeMap() {
            return Object.fromEntries(
                Object.entries(this.workTimeTypeMap).map(([key, value]) => [value, key])
            );
        }
    }
}
</script>

<style scoped>
.company-section {
    /* 使用Flex布局 */
    display: flex;
    /* 允许换行 */
    flex-wrap: wrap;
    /* 卡片之间的间距（水平和垂直方向） */
    gap: 25px;
    /* 可选：容器内部左右留出边距，避免边缘卡片贴边 */
    padding: 0 10px;
    /* 可选：清除容器默认间距 */
    margin: 0;
}

/* 岗位卡片：控制宽度，确保一行3个 */
.company-card {
    /* 核心：宽度 = 1/3 - 间隔（gap）的分摊值 */
    /* 因为gap会占用总宽度，所以需要减去部分宽度避免换行 */
    width: 330px;
    /* 3个卡片 + 2个gap（共20*2=40px），每个卡片分摊40px/3≈13.33px */
    /* 取消卡片默认边框（可选，根据需求保留） */
    border: none;
    /* 可选：添加卡片阴影，增强立体感 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* 可选：卡片内部padding，让内容不贴边 */
    padding: 15px;
    /* 避免卡片被压缩 */
    flex-shrink: 0;
}

.company-title-salary {
    display: flex;
    flex-direction: column;
    /* 纵向排列 */
    align-items: center;
    /* 水平居中 */
    padding: 10px 0;
    /* 上下内边距，优化间距 */
}

.company-title {
    margin-top: 8px;
    /* 与头像保持距离 */
    font-size: 16px;
    font-weight: 500;
}
</style>
